<template>
    <div class="box box3" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
        <!-- <ImmersiveNavbar title="眨眨眼" /> -->
        <div @click="goBack" class="back"></div>
        <img v-if="showFirst" :src="img04" class="image" alt="">
        <img @click="goToBox5" v-else :src="img05" class="image" alt="">
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
// import backImg from '@/assets/img/back.png'
import img04 from '@/assets/img/04.jpg'
import img05 from '@/assets/img/05.jpg'

const showFirst = ref(true)
const router = useRouter()

function goBack() {
    router.back()
}

function goToBox5() {
    router.push('/box5')
}

onMounted(() => {
    setTimeout(() => {
        showFirst.value = false
    }, 2000)
})
</script>

<script>
/* global plus */
export default {
    name: 'BoxThree',
    mounted() {
        document.addEventListener('plusready', this.handleBackButton);
    },
    methods: {
        handleBackButton() {
            if (typeof plus !== 'undefined' && plus.key) {
                plus.key.addEventListener('backbutton', () => {
                    if (this.$route.path !== '/box1') {
                        this.$router.push('/box1');
                    } else {
                        if (confirm('再按一次退出应用')) {
                            plus.runtime.quit();
                        }
                    }
                });
            }
        },
        handleTouchStart(e) {
            this.startX = e.touches[0].clientX
            this.startY = e.touches[0].clientY
        },
        handleTouchEnd(e) {
            const endX = e.changedTouches[0].clientX
            const endY = e.changedTouches[0].clientY
            const deltaX = endX - this.startX
            const deltaY = endY - this.startY
            if (Math.abs(deltaX) > 50 && Math.abs(deltaY) < 30) {
                if (deltaX > 0) {
                    this.goPrev()
                } else {
                    this.goNext()
                }
            }
        },
        goPrev() {
            this.$router.push('/box1')
        },
        goNext() {
            this.$router.push('/box5')
        }
    },
    beforeUnmount() {
        // 移除监听
        document.removeEventListener('plusready', this.handleBackButton);
    }
}
</script>

<style scoped>
.back {
    position: absolute;
    top: 52.7781px;
    left: 16px;
    width: 30px;
    height: 30px;
    z-index: 999;
    /* background-color: red; */
    /* opacity: 0; */
}

.backimg {
    position: absolute;
    top: 51px;
    left: 15px;
    width: 17px;
    z-index: 10;
    cursor: pointer;
}

.image {
    width: 375px;
    height: auto;
    display: block;
    cursor: pointer;
}

.box {
    width: 375px;
    height: 100vh;
    position: absolute;
    overflow: auto;
    background: #fff;
}

.d_box {
    position: absolute;
    top: 127px;
    left: 200px;
    display: flex;
    width: 30px;
    height: 5px;
    align-items: center;
    justify-content: space-between;
}

.dian {
    background-color: #b5b8bd;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    display: block;
    margin-left: 10px;
    animation: wave 0.8s infinite linear;
}

.dian:nth-child(1) {
    animation-delay: 0s;
}

.dian:nth-child(2) {
    animation-delay: 0.15s;
}

.dian:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes wave {
    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-4px);
    }

    60% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}
</style>